import React, { useEffect, useState } from 'react';
import { ShopCardContainer, ShadowContainer, SizeBox } from './style';
import { CSSTransition } from 'react-transition-group';

function ShopCard(props) {
  const { changePopup, shopInfo } = props;

  let [showSize, setShowSize] = useState(); 

  // let shopSize = [];

  useEffect(() => {
    console.log(shopInfo)
  },[])

  return (
    <div>
      <ShadowContainer onClick={() => changePopup()}></ShadowContainer>
      <ShopCardContainer>
        <div className='content'>
          <div className='content-left'>
            <img className='content-left_image' src={shopInfo.image} />
            <div className='content-left_price'>
              <svg t="1641216704920" className='i' viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2168" width="10" height="10"><path d="M883 552.5v-87.7H617.8L864.9 107l-73-48-272.6 394.9L246 59.4 172.3 106l247.5 358.8H154.9v87.1h320v90.2h-320V731h320v234h88.7V729.8H883v-86.5H563.6v-89.5z" p-id="2169" fill="#333333"></path></svg>
              <div>{shopInfo.price}</div>
            </div>
            <div className='select-size'>
              <svg t="1641913123898" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2197" width="16" height="16"><path d="M891.863125 0H49.559696C22.243023 0 0.01057 22.228929 0.01057 49.549126v495.473642c0 27.316673 22.228929 49.549126 49.545603 49.549126h627.599946v-173.416656c0-22.806762 18.480066-41.290351 41.290351-41.290351 22.806762 0 41.290351 18.480066 41.290351 41.290351v170.129353l1.867385-0.081037c5.05251-17.109476 20.678647-29.663236 39.422966-29.663237 17.588654 0 32.520688 11.049282 38.46461 26.559149l5.73252-0.232542c5.996773-15.375978 20.875956-26.326607 38.383572-26.326607 16.334335 0 30.322106 9.562421 37.012982 23.321174l0.761048-0.03171a49.813378 49.813378 0 0 0 20.033871-39.80349V49.549126C941.408728 22.228929 919.179798 0 891.863125 0z" fill="#00cbcc" p-id="2198"></path><path d="M313.812305 189.930682c0-68.307538-55.559992-123.86753-123.86753-123.86753H66.073722V528.505218h123.86753c68.307538 0 123.86753-55.559992 123.86753-123.86753 0-45.831973-25.02296-85.931425-62.131074-107.353503 37.111636-21.422078 62.134597-61.521531 62.134597-107.353503z m-33.031576 214.707006c0 50.091725-40.761846 90.835953-90.835954 90.835954H99.105298V313.801735h90.835954c50.077631 0 90.839477 40.744229 90.839477 90.835953zM189.941252 280.770159H99.105298V99.094728h90.835954c50.074108 0 90.835953 40.744229 90.835953 90.835954S240.018883 280.770159 189.941252 280.770159zM594.57894 404.637688V66.063152h-33.031576v338.574536c0 50.091725-40.761846 90.835953-90.835953 90.835954s-90.835953-40.744229-90.835954-90.835954V66.063152h-33.031576v338.574536c0 68.307538 55.559992 123.86753 123.86753 123.86753s123.86753-55.559992 123.867529-123.86753z" fill="#00cbcc" p-id="2199"></path><path d="M1004.963242 593.000471c-12.056966-10.933011-28.225702-16.267391-44.676308-14.650164-7.860634 0.792758-15.192763 3.385957-21.799078 7.215858-7.399073-23.419828-29.067787-40.54692-54.883505-40.546921-16.186353 0-30.783667 6.722586-41.290351 17.472383-10.50316-10.75332-25.103998-17.472383-41.290351-17.472383-8.903551 0-17.243364 2.195058-24.772802 5.795941V328.994498c55.922899-8.061466 99.094728-56.169535 99.094729-114.291015V66.063152h-33.031576v148.643854c0 45.532486-37.044692 82.580702-82.577179 82.580702s-82.577179-37.044692-82.577179-82.580702V66.063152h-33.031576v148.643854c0 58.117957 43.17183 106.229549 99.094729 114.291016v40.282667c-5.845268-2.924396-12.15562-4.953856-18.878207-5.630342a57.71277 57.71277 0 0 0-44.676308 14.650165 57.895985 57.895985 0 0 0-19.026187 42.858249v311.208536l-62.923832-62.909737c-25.946083-25.977793-66.757256-27.912122-92.833703-4.411257-13.642481 12.289508-21.404461 29.117114-21.883639 47.417488-0.461561 18.036121 10.337562 35.691719 23.088631 48.439265l171.070092 167.289518v95.793333h33.031576v-109.467525l-180.731167-176.96821c-6.472427-6.472427-11.792713-15.080016-11.546078-24.230203s3.202742-17.57456 10.023983-23.733407c12.832107-11.560171 33.627025-10.073309 46.920693 3.220358l118.81502 119.294198V421.151715c0-7.085493 2.906779-13.607248 8.16012-18.381412a24.779848 24.779848 0 0 1 19.223497-6.261025c12.419873 1.240226 22.165509 13.096359 22.165509 27.003093v253.633178h33.031576v-74.321927c0-13.660098 11.116226-24.772801 24.772801-24.772802s24.772801 11.116226 24.772801 24.772802v74.321927h33.031576v-74.321927c0-13.660098 11.116226-24.772801 24.772802-24.772802s24.772801 11.116226 24.772801 24.772802v90.835953h33.031576v-55.443721c0-13.889117 9.745636-25.766391 22.165509-27.003093a24.522642 24.522642 0 0 1 19.223496 6.261025 24.568446 24.568446 0 0 1 8.160121 18.381412v305.54296c0 9.10086-7.399073 16.51755-16.514027 16.51755h-16.517549v66.063152h33.031576v-35.857318c19.223496-6.821241 33.031576-25.185035 33.031576-46.723384v-305.54296a57.888938 57.888938 0 0 0-19.026188-42.854727z" fill="#00cbcc" p-id="2200"></path></svg>
              <span>已选{showSize}</span>
            </div>
          </div>
          <div className='iconfont icon-delete' onClick={() => changePopup()}>&#xe600;</div>
        </div>
        <div className='size-container'>
          {
            shopInfo.clothesSize.map((item, _) => {
              return (
                <div className='size-box' key={item} onClick={(e) => setShowSize(e.target.innerText)}>{item}</div>
              )
            })
          }
        </div>
      </ShopCardContainer>
    </div>
  )
}

export default React.memo(ShopCard);